<template>
  <div class="login-bg" v-if="props.showLogin">
    <div v-if="showBindPhone" class="login-modal">
      <img src="@i/icon/success-icon.png" class="success-icon">
      <span class="title">扫码成功</span>
      <span class="tip mt20">绑定手机号可以获得更高级的安全保护，</span>
      <span class="tip mt10">同时直接使用手机号登录快捷方便</span>
      <div class="form-input">
        <a-input :bordered="false" class="input-container" placeholder="请输入手机号" v-model:value="params.mobilePhone" />
      </div>
      <div class="form-input">
        <a-input-password :bordered="false" class="input-container" placeholder="请输入验证码" v-model:value="params.captcha" />
        <span v-if="countCurrent === countTotal" class="captcha-btn" @click="onSendCaptcha">获取验证码</span>
        <span v-else class="wait-btn">{{ countCurrent }}s后获取</span>
      </div>
      <span class="bind-button" @click="onBindPhone">绑定手机号</span>
      <img src="@i/icon/close-icon.png" class="close-icon" @click="onClose">
    </div>
    <div class="login-modal" v-else>
      <span class="title">微信登录/注册</span>
      <div class="code-img-container">
        <QrcodeVue :value="qrCode.url" :size="180" level="H" v-if="qrCode.url"></QrcodeVue>
        <div class="refresh-button" @click="onRefresh">
          <span>刷新二维码</span>
        </div>
      </div>
      <div class="row-line"></div>
      <span class="tip">登录注册即代表同意</span>
      <div><span class="g-link" @click="onRouterUser">《用户协议》</span><span class="g-link"
          @click="onRouterPrivacy">《法律声明及隐私权政策》</span></div>
      <img src="@i/icon/close-icon.png" class="close-icon" @click="onClose">
    </div>
  </div>
</template>

<script lang="ts" setup>
import QrcodeVue from 'qrcode.vue';
import { message } from 'ant-design-vue'
import { ref, onMounted } from 'vue'
import regular from '@/utils/regular'
import {
  getLoginQrcode,
  login,
  logout,
  qrCodeLogin,
  wechatLogin
} from '@r/api/account.ts'
import { getUserInfo, sendCaptcha, bindMobilePhone } from '@r/api/user'
const qrCode = ref<any>({})
const params = ref<any>({
  mobilePhone: '',
  captcha: ''
})
const countCurrent = ref<number>(60)
const countTotal = ref<number>(60)
const showBindPhone = ref<boolean>(false)
let timeFunc: string | number | NodeJS.Timeout | undefined
const emits = defineEmits<{
  (emitstr: 'onUpdata', emitData: {}): void
}>()

const props = withDefaults(
  defineProps<{
    showLogin?: boolean;
  }>(),
  {
    showLogin: false,
  }
);
function onRouterUser() {
  window.open('https://www.haimaitools.com/user.html', '_blank');
}
function onRouterPrivacy() {
  window.open('https://www.haimaitools.com/privacy.html', '_blank');
}
function onClose() {
  props.showLogin = false
  emits('onUpdata', {})
}
function onSendCaptcha() {
  sendResetPwdCaptcha()
  handleInterval()
}
function handleInterval() {
  countCurrent.value--
  setTimeout(() => {
    if (countCurrent.value === 0) {
      countCurrent.value = countTotal.value
    } else {
      handleInterval()
    }
  }, 1 * 1000)
}
function sendResetPwdCaptcha() {
  // let regPhone = /^[1][0-9]{10}$/
  if (!regular.regPhone.test(params.value.mobilePhone)) {
    message.warn('请检查您的手机号是否正确')
    return
  }
  sendCaptcha({ mobilePhone: params.value.mobilePhone })
    .then(res => {
      message.success('发送成功，请注意查收')
    })
}
function onBindPhone() {
  if (!regular.regPhone.test(params.value.mobilePhone)) {
    message.warn('请检查您的手机号是否正确')
    return
  }
  if (!regular.regCaptcha.test(params.value.captcha)) {
    message.warn('请检查您的验证码是否正确')
    return
  }
  bindMobilePhone({ ...params.value })
    .then(res => {
      message.success('绑定成功')
      onClose()
    })
}
function onRefresh() {
  clearTimeout(timeFunc)
  //  = undefined
  getLoginQrcodeFunc()
}
function qrCodeLoginFunc() {
  qrCodeLogin({ ticket: qrCode.value.ticket }).then((res: any) => {
    console.log(res);

    localStorage.setItem('token', res.token)
    getUserInfoFunc()
  }).catch(err => {
    console.log(err);
    if (err === 5103) {
      onRefresh()
      return
    }
    timeFunc = setTimeout(() => {
      qrCodeLoginFunc()
    }, 4000);
  })
}
function getUserInfoFunc() {
  getUserInfo().then((res: any) => {
    console.log(res);
    if (res.mobilePhone) {
      onClose()
    } else {
      showBindPhone.value = true
    }
  })
}

function getLoginQrcodeFunc() {
  getLoginQrcode().then((res: any) => {
    console.log(res);
    qrCode.value = res
    qrCodeLoginFunc()
  })
}
onMounted(() => {
  getLoginQrcodeFunc()
});
</script>

<style scoped lang="less">
.login-bg {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  left: 0;
  top: 0;
}

.login-modal {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 480px;
  height: 490px;
  border-radius: 20px;
  opacity: 1;
  background: #FFFFFF;
  padding: 50px 40px;

  .success-icon {
    height: 50px;
    width: 50px;
    margin-bottom: 20px;
  }

  .title {
    font-size: 22px;
    font-weight: 600;
    line-height: 22px;
    text-align: center;
    color: #3D3D3D;
  }

  .code-img-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    margin-top: 24px;
    border: 1px solid #eee;
    border-radius: 20px;
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.06);
  }

  .refresh-button {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 16px;
    color: #666666;
    cursor: pointer;
  }

  .refresh-button :hover {
    color: #FF6923;
  }

  .row-line {
    height: 1px;
    width: 100%;
    background: #EFEFEF;
    margin: 43px 0 30px;
    flex-shrink: 0;
  }

  .tip {
    font-size: 14px;
    font-weight: normal;
    line-height: 20px;
    text-align: center;
    color: #999999
  }

  .close-icon {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    margin: auto;
    cursor: pointer;
    height: 40px;
    width: 40px;
  }

  .form-input {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 20px;
    width: 100%;

    .input-container {
      height: 48px;
      border-radius: 240px;
      background: #FFFFFF;
      box-sizing: border-box;
      border: 1px solid #DCDCDC;
      flex: 1;
    }

    .captcha-btn {
      width: 134px;
      height: 48px;
      border-radius: 240px;
      opacity: 1;
      background: #FFFFFF;
      box-sizing: border-box;
      border: 1px solid #FF6923;
      margin-left: 15px;
      color: #FF6923;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
    }

    .wait-btn {
      width: 134px;
      height: 48px;
      border-radius: 240px;
      opacity: 1;
      background: #FFFFFF;
      box-sizing: border-box;
      border: 1px solid #D1D1D1;
      margin-left: 15px;
      color: #D1D1D1;
      font-size: 16px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .bind-button {
    width: 400px;
    height: 48px;
    border-radius: 86px;
    opacity: 1;
    background: linear-gradient(90deg, #FA7D54 0%, #FF3F3F 99%);
    box-shadow: 0px 4px 10px 0px rgba(254, 68, 65, 0.3);
    color: #FFFFFF;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 36px;
    cursor: pointer;
  }
}
</style>